<template>
    <div id="Login" i="login">
        <div class="login-container">
            <div class="title">
                <div class="logo">
                    <img class="logo-img" src="@/assets/images/LOGO.png">
                </div>
                {{title}}
            </div>
            <!-- 账号密码登录 -->
            <a-form-model ref="form" class="login-form" :rules="formRules" :model="loginForm">
                <a-form-model-item prop="account">
                    <div class="form-item">
                        <a-input v-model="loginForm.account" placeholder="请输入账号">
                            <a-icon slot="prefix" type="user" />
                        </a-input>
                    </div>
                </a-form-model-item>
                <a-form-model-item prop="password">
                    <div class="form-item">
                        <a-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                            <a-icon slot="prefix" type="lock" />
                        </a-input>
                    </div>
                </a-form-model-item>
                <a-form-model-item prop="code">
                    <div class="form-item form-code">
                        <a-input v-model="loginForm.vrifyCode" placeholder="请输入验证码">
                            <a-icon slot="prefix" type="code" />
                            <template slot="addonAfter">
                                <div class="code-img" @click="getImgCode">
                                    <img :src="'data:image/png;base64,'+ checkCode">
                                </div>
                            </template>
                        </a-input>
                    </div>
                </a-form-model-item>
                <div class="flex">
                    <a-switch class="remember-btn" v-model="isRemember" />
                    <span class="remeber-text">记住密码</span>
                </div>
                <a-form-model-item>
                    <div class="login-wrap">
                        <a-button class="login-btn1" @click="submitForm" :loading="isSubmit" type="primary">会员登录</a-button>
                        <a-button class="login-btn2" @click="submitTwo" type="primary">员工登录</a-button>
                    </div>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util'
import rules from '@/util/rules'
import md5 from 'js-md5'

@Component
export default class Login extends Vue {
    $refs!: {form: HTMLFormElement}
    title: string = '腾越管理中台'
    loginForm: any = {
        account: '',
        password: '',
        vrifyCode: ''
    }
    isRemember: boolean = true
    formRules: any = {
        account: [{ validator: rules.checkLen(20, '账号不能为空'), trigger: 'blur' }],
        password: [
            { validator: rules.checkLenInterval(6, 12), trigger: 'blur' },
            { min: 6, message: '密码至少6位数字', trigger: 'blur' }
        ],
        vrifyCode: [{ validator: rules.checkLen(4, '验证码不能为空'), trigger: 'blur' }]
    }
    checkCode: string = ''
    isSubmit: boolean = false
    ticket: string = ''
    token: string = '' // 图形验证码所得的token

    mounted () {
      if (this.$route.query.code) {
        this.getUserInfo(this.$route.query.code || '')
      }

      this.getImgCode();
        let account = localStorage.getItem('account');
        let password = localStorage.getItem('password');
        if (account && password) {
            Object.assign(this.loginForm, {
                account,
                password
            })
        }
        // 回车提交表单
        document.onkeydown = (event) => {
            var e = event || window.event;
            if (e && e.keyCode === 13 && !this.isSubmit) { // enter 键
                this.submitForm();
            }
        }
    }

  // 获取code
  getToCode () {
    let href = process.env.VUE_APP_UAT + encodeURIComponent(location.href) + '&response_type=code&state=123'
    location.href = href
  }

    // 获取图形验证码
    getImgCode () {
        this.$api.memberImageVerificationFetch().then((res: any) => {
            this.checkCode = res.data.pic;
            this.token = res.data.token;
        }).catch()
    }
    submitForm () {
        if (this.isSubmit) return;
        this.$refs['form'].validate((valid: any) => {
            if (valid) {
                let { account, password, vrifyCode } = this.loginForm
                let data = {
                    account,
                    password: md5(password),
                    vrifyCode,
                    token: this.token
                }
                this.isSubmit = true
                // 登录
                this.$api.memberMemberLoginFetch(data).then((res: any) => {
                    this.ticket = res.data
                    localStorage.setItem('memberType', '1')
                    this.getUserInfo(this.ticket)
                }).catch(() => {
                    this.isSubmit = false
                })
            } else {
                this.isSubmit = false
                this.$message.error('登录失败')
                return false
            }
        })
    }
    submitTwo () {
        // this.$router.push('/');
        this.getToCode();
    }
    getUserInfo (code: any) {
        let data = {
            code
        }
        this.$api.memberMemberInfoFetch(data).then((res: any) => {
            let { sessionId } = res.data
            let account = res.data.adminId
            let { password } = this.loginForm
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            localStorage.setItem('sessionId', sessionId)
            util.savePermissions(res.data.power_list)
            // 更新vuex数据
            this.$store.commit('userInfo', res.data)
            this.$store.commit('roleId', res.data.roleId)
            if (this.isRemember) {
                localStorage.setItem('account', account)
                localStorage.setItem('password', password)
            } else {
                localStorage.removeItem('password')
            }
            this.$message.success('登录成功')
            this.isSubmit = false
            this.$router.push('/systemManage/userInfo').catch(() => {})
        })
    }
}
</script>

<style lang="scss">
[i="login"] {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;;
    justify-content: center;
    align-items: center;
    background-image: url('images/login_bg.svg');
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
    .login-container{
        width: 360px;
        min-height: 500px;
        display: flex;
        flex-direction: column;;
        justify-content: center;
        align-items: center;
        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 36px;
        }
        .logo {
            width: 60px;
            height: 60px;
            margin-right: 10px;
            border-radius: 50%;
            overflow: hidden;
            .logo-img {
                width: 100%;
                height: 100%;
            }
        }
        .login-form {
            width: 100%;
            border-radius:6px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding-top: 22px;
            .el-input--prefix {
                .el-input__inner {
                    padding-left: 40px;
                    border: none;
                    background: transparent;
                    border-bottom: 1px solid #bacad9;
                }
            }
            .form-item {
                width: 360px;
                max-width: 100%;
                display: flex;
                align-items: center;
                .el-input__prefix {
                    .el-input__icon {
                        font-size: 20px;
                        color: #bacad9;
                    }
                }
                .el-input-group__append {
                    padding: 0;
                    border: none;
                }
                .code-img {
                    cursor: pointer;
                    width: 82px;
                    height: 30px;
                    border-radius: 0 4px 4px 0;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            /deep/ .ant-form-item {
                margin-bottom: 20px;
            }
            /deep/ .ant-input {
                height: 40px;
            }
            .form-code {
                .ant-input-group-addon {
                    padding: 0;
                }
            }
            .flex {
                display: flex;
                align-items: center;
            }
            .remember-btn {
                width: 40px;
                transform: scale(0.8);
            }
            .remeber-text {
                padding-left: 4px;
                font-size: 13px;
            }
            .login-wrap{
                display: flex;
                justify-content: space-between;
                .login-btn1{
                    margin-top: 48px;
                    height: 40px;
                    width: 48%;
                    font-size: 16px;
                    font-weight: 600;
                    letter-spacing: 4px;
                    box-shadow: 2px 5px 10px rgba(64, 158, 255, .3);
                }
                .login-btn2{
                    margin-top: 48px;
                    height: 40px;
                    width: 48%;
                    font-size: 16px;
                    font-weight: 600;
                    letter-spacing: 4px;
                    box-shadow: 2px 5px 10px rgba(64, 158, 255, .3);
                }
            }

        }
    }
}
</style>
